<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="role_main">
                    <div  class="role_content">
                        <div class="body-content">
                            <create-role ref="create" :defaultTemplate="defaultTemplate" @getAllRoles = getAllRoles></create-role>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    border
                                    class="role-table"
                            >
                                <el-table-column label="角色名">
                                    <template slot-scope="scope">
                                        <i class="el-icon-user"></i>
                                        <span style="margin-left: 10px">{{ scope.row.rolename }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="180">
                                    <template slot-scope="scope">
                                        <el-button
                                                size="mini"
                                                @click="handleEdit(scope.$index, scope.row)"
                                        >编辑</el-button
                                        >
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)"
                                        >删除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <!-- 编辑角色权限 -->
                        <el-dialog title="提示" :visible.sync="editRoleDig" width="60%">
                            <p>角色名称:</p>
                            <el-input v-model="editRoleName" disabled="true"></el-input>
                            <p>设置角色权限列表:</p>
                            <el-tree
                                    :key="treeKey"
                                    :data="choosedefaultTemplate"
                                    ref ="editTree"
                                    show-checkbox
                                    node-key="id"
                                    default-expand-allid
                                    :expand-on-cliddck-node="false"
                                    :default-checked-keys="listChoose"
                                    :default-expanded-keys="listChoose"
                            >
                            </el-tree>
                            <span slot="footer" class="dialog-footer">
                    <el-button @click="editRoleDig = false">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确定修改</el-button>
                  </span>
                        </el-dialog>
                    </div>
                </el-main>
                <vFootSpace/>
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import createRole from "../components/roleManagement/createRole";
    import {customTreeData, customAsideData} from "../plugins/roleManage"
    export default {
        name: "Role",
        data() {
            return {
                treeKey:1,
                editRoleName:"",
                editRoleDig:false,
                listChoose:[],
                asideList: [],
                createRoleAside: {},
                defaultTemplate: [],
                choosedefaultTemplate:[],
                dialogVisible: false,
                tableData: [
                ],
            };
        },
        methods: {
            confirmEdit(){
                let editData = this.$refs.editTree.getCheckedNodes(false, false);
                let editleafDAta = this.$refs.editTree.getHalfCheckedNodes();
                let editDataList= customAsideData(editData, editleafDAta)
                this.$axios({
                    url: "/role/update_role_by_name.action",
                    method: "post",
                    data: {
                        roleName: this.editRoleName,
                        roleList: JSON.stringify(editDataList),
                    },
                }).then(res=>{
                    if(res.data.status){
                        this.editRoleDig = false;
                        this.$message({
                            message:"权限修改成功！重新登陆后生效",
                            type:"success",
                        })}
                    else{
                        this.$message({
                            message:"修改失败",
                            type:"error",
                        })
                    }
                })
            },
            handleEdit(index, row){
                this.treeKey = Math.random();
                this.listChoose = [];
                this.editRoleDig = true;
                this.$axios({
                    url:"/role/get_role_by_role_name.action",
                    method:"post",
                    data:{
                        roleName:row.rolename
                    }
                }).then(res=>{

                    this.editRoleName = res.data.content.role.roleName;
                    let listData = res.data.content.role.roleList;
                    let  resultData = customTreeData(listData)
                    // console.log(resultData);
                    let chooseArr = [];
                    //显示的为模板侧边栏，找出模板侧边栏和实际角色侧边栏相同的id，设置模板侧边栏默认选中的值
                    this.choosedefaultTemplate.forEach(item=>{
                        resultData.forEach(value=>{
                            if(item.label==value.label){
                                item.children.forEach(obj=>{
                                    value.children.forEach(val=>{
                                        if(obj.id == val.id){
                                            chooseArr.push(val.id)
                                        }
                                    })
                                })
                            }
                        })
                    })
                    this.listChoose = chooseArr
                    // console.log(chooseArr);
                })
            },
            handleDelete(index, row){
                this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios({
                        method:"post",
                        data:{
                            roleName:row.rolename
                        },
                        url:"role/delete_role_by_name.action"
                    }).then(res=>{
                        if(res.data.status){
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                            this.getAllRoles();
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            getAllRoles(){
                this.tableData = []
                this.$axios({
                    method:"post",
                    data:{"pageNumber":"1","pageSize":"1000"},
                    url:"/role/get_role_by_page_number.action",
                }).then(res=>{
                    console.log(res);
                    let roleList=res.data.content.pageInfo.list
                    // console.log(roleList);
                    roleList.forEach(item=>{
                        this.tableData.push({"rolename":item.roleName})
                    })
                    // console.log(this.tableData);
                })
            }
        },
        components: {
            createRole,
        },
        mounted() {
            this.$axios({
                method: "get",
                url: "/role/get_default_role_template.action",
            }).then((res) => {
                this.defaultTemplate = res.data.content.template;
                this.choosedefaultTemplate = customTreeData(res.data.content.template)
            });
        },
        created(){
           this.getAllRoles();
        }
    };
</script>

<style scoped>
    .body-content {
      position: relative;
      width: 80%;
      top: 5rem;
      left: 5rem;
    }
    .role_main {
      padding: 10px;
      height: 92vh;
      width: 100%;
      margin-top: 56px;
    }
    .add-role {
        margin-bottom: 20px;
        float: right;
    }
    .role_content {
      background-color: white;
      height: 97%;
      width: 100%;
      margin-top: 0;
    }
</style>